<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布</title>
    <style>
        .img1{
            position: absolute;
            top: 2px;
        }
        #bigbox{
            width: 600px;
            height: 600px;
            background: skyblue;
            margin: 0 auto;
        }
        #bigbox>h1{
            width: 100%;
            text-align: center;
            color: salmon;
        }
        .box1{
            height: 200px;


        }
        .box2{
            height: 220px;
        }
        .box1 img{
            float: left;
            margin: 25px;
        }
        .box2 img{
            float: left;
            margin:20px 63px;
            width: 150px;
            height: 150px;

        }
        .box2 h1{
            display: block;
            color: springgreen;
            float: left;
            line-height: 150px;

        }
        img{
            width: 150px;
            height: 150px;
        }
        p{
            text-align: center;
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
        .text{
            height: 20px;
        }
        .text span{
            font-size: 20px;
            color: #ffffff;
            margin: 0 100px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div id='bigbox'>
    <h1>谁是无敌剪刀手</h1>
    <div class="box1">
        <img src="./素材包/stone.png" alt="">
        <img src="./素材包/scissors.png" alt="">
        <img src="./素材包/cloth.png" alt="">
    </div>
    <div class="text">
        <span>您选择了</span>
        <span>电脑朋友选</span>
    </div>
    <div class="box2">
        <img src="./素材包/question.png" alt="">
        <h1>VS</h1>
        <img src="./素材包/question.png" alt="">
    </div>

    <p style="color: aqua;font-size: 20px">冲鸭</p>
    <img id="pika" class="img1" src="./素材包/small.gif">

</div>
<script>
    let imgs=document.getElementsByTagName('img')
    // console.log(imgs.length)
    for(let i=0;i<3;i++){
        imgs[i].onclick=function(){//进行点击事件的绑定
            game(this,i);//调用我们的

        }
    }

    function game(src,i){
        // console.log(i)
        //用户
        let str=src.src;
        let user=document.getElementsByTagName('img')[3]
        user.src=str

        //系统
        setTimeout(function (){
            let user=document.getElementsByTagName('img')[4]
            let imgSrc=['./素材包/stone.png','./素材包/scissors.png','./素材包/cloth.png']//创建数据引入我们的数据进去
            let num = Math.floor(Math.random() * imgSrc.length);//进行取得随机值 我们的
            user.src=imgSrc[num]
            let rs=document.getElementsByTagName('p')[0]
            if(i==0&&num==1 || i==1&&num==2
                || i==2&&num==0){
                rs.innerHTML="恭喜你呀！"
            }else if(i==num){
                rs.innerHTML="平局啦"
            }else{
                rs.innerHTML="game over"

            }
        },200)//设置我们的电脑的反应时间 这里设置的时间就是 200ms


    }
    var pic=document.getElementById('pika')//这个就是获取一个标签为img的元素
    document.addEventListener('mousemove',function (e) {
        //console.log(1);//只要鼠标移动1px我们的就会触发这个事件
        var x=e.pageX;//获取最新的坐标出来
        var y=e.pageY;//这个获取我们鼠标的坐标
        //3.千万不要忘记给我们的left和top添加px单位
        pic.style.left=x+'px';
        pic.style.top=y+40+'px';

    })

</script>


</body>